<template>
  <div
    class="question_style"
    :class="
      question.isChecked
        ? question.studentAnswer
          ? question.is_true == 1
            ? 'question-true'
            : 'question-false'
          : 'question-noanswer'
        : ''
    "
  >
    <div
      v-if="
        question.question_type == 1 ||
        question.question_type == 2 ||
        question.question_type == 3
      "
    >
      <div class="question-title">
        <!-- 英译汉-->
        <span v-if="question.question_type == 1">
          <span class="pr5" v-if="index">{{ index }}.</span>
          <span>{{ question.word_name }}</span>
        </span>
        <!-- 汉译英 -->
        <span v-if="question.question_type == 2" class="baseline">
          <span class="pr5" v-if="index">{{ index }}.</span>
          <span>
            <p
              v-for="(paraphrase, index) in question.paraphrase.split('\n')"
              :key="index"
            >
              {{ paraphrase }}
            </p>
          </span>
        </span>
        <!-- 听力理解 -->
        <span v-if="question.question_type == 3">
          <span v-if="index">{{ index }}.</span>
          <AudioPlay
            @click="playAudio"
            v-if="!isQuick"
            class="ml20 click"
            ref="audioPlay"
            :type="2"
            :audioSrc="baseURL + question.audioURL"
          ></AudioPlay>
          <AudioPlay
            @click="playAudio"
            v-if="isQuick"
            class="ml20 click"
            ref="audioPlay"
            :type="1"
            :audioSrc="baseURL + question.audioURL"
          ></AudioPlay>
        </span>
        <img
          v-if="
            question.isChecked &&
            question.studentAnswer &&
            question.is_true == 1 &&
            isMemory
          "
          src="@/assets/img/true-b.png"
          alt=""
          class="ml30"
        />
        <img
          v-if="
            question.isChecked &&
            question.studentAnswer &&
            question.is_true == 0 &&
            isMemory
          "
          src="@/assets/img/false-b.png"
          alt=""
          class="ml30"
        />
        <img
          class="checked-answer"
          v-if="
            question.isChecked &&
            question.studentAnswer &&
            question.is_true == 1 &&
            !isMemory
          "
          src="@/assets/img/icon/true.png"
          alt=""
        />
        <img
          class="checked-answer"
          v-if="
            question.isChecked &&
            question.studentAnswer &&
            question.is_true == 0 &&
            !isMemory
          "
          src="@/assets/img/icon/false.png"
          alt=""
        />
        <span
          class="no-check checked-answer"
          v-if="question.isChecked && !question.studentAnswer"
        >
          （未选）
        </span>
        <AudioPlay
          @click="playAudio"
          v-if="isMemory"
          class="click fr"
          ref="audioPlay"
          :type="1"
          :audioSrc="baseURL + question.audioURL"
        ></AudioPlay>
      </div>
      <el-radio-group
        class="question-answer-list"
        v-model="studentAnswer"
        @change="changeAnswer"
        :disabled="question.isChecked || disabled"
      >
        <el-radio
          class="question-radio"
          v-for="(answer, index) in question.answer_list"
          :label="answer.word_id || answer.word_name || answer.paraphrase"
          :key="index"
          :class="[
            question.studentAnswer ==
              (answer.word_id || answer.word_name || answer.paraphrase) &&
            question.isChecked
              ? 'check-radio-stu'
              : '',
            question.trueAnswer ==
              (answer.word_id || answer.word_name || answer.paraphrase) &&
            question.isChecked
              ? 'check-radio-true'
              : '',
          ]"
        >
          <span class="check-item-label mr5" v-if="isPrint">
            {{ String.fromCharCode(index + 65) }}
          </span>
          <span v-if="answer.word_name">{{ answer.word_name }}</span>
          <span v-else>
            <p
              v-for="(paraphrase, index) in answer.paraphrase.split('\n')"
              :key="index"
            >
              {{ paraphrase }}
            </p>
          </span>
        </el-radio>
      </el-radio-group>
    </div>

    <div
      :class="question.question_type == 4 ? 'flex-question' : ''"
      v-if="
        (question.question_type == 4 || question.question_type == 5) &&
        !question.isChecked
      "
    >
      <div class="question-title">
        <span class="pr5" v-if="index">{{ index }}.</span>
        <!-- 默写 -->
        <span>
          <span v-if="question.question_type == 5">
            <p
              v-for="(paraphrase, index) in question.paraphrase.split('\n')"
              :key="index"
            >
              {{ paraphrase }}
            </p>
          </span>
        </span>
        <!-- 听写 -->
        <span v-if="question.question_type == 4">
          <AudioPlay
            @click="playAudio"
            v-if="isQuick"
            class="ml20 click"
            ref="audioPlay"
            :type="1"
            :audioSrc="baseURL + question.audioURL"
          ></AudioPlay>
          <AudioPlay
            @click="playAudio"
            v-if="!isQuick"
            class="ml20 click"
            ref="audioPlay"
            :type="3"
            :audioSrc="baseURL + question.audioURL"
          ></AudioPlay>
        </span>
      </div>
      <div class="input-container">
        <el-input
          v-model="studentAnswer"
          @focus="changeAnswer"
          @input="changeStudentAnswer"
          :placeholder="disabled ? '' : '请输入单词'"
          ref="input"
          :disabled="question.isChecked || disabled"
          @paste.native.capture.prevent="$handlePaste"
        ></el-input>
      </div>
    </div>
    <div
      :class="question.question_type == 4 ? 'flex-question' : ''"
      v-if="
        (question.question_type == 4 || question.question_type == 5) &&
        question.isChecked
      "
    >
      <div class="question-title">
        <span class="pr5">{{ index }}.</span>
        <!-- 默写 -->
        <span>
          <span v-if="question.question_type == 5">
            <p
              v-for="(paraphrase, index) in question.paraphrase.split('\n')"
              :key="index"
            >
              {{ paraphrase }}
            </p>
          </span>
        </span>
        <!-- 听写 -->
        <span v-if="question.question_type == 4">
          <AudioPlay
            @click="playAudio"
            ref="audioPlay"
            :type="3"
            :audioSrc="baseURL + question.audioURL"
          ></AudioPlay>
        </span>
      </div>

      <div class="input-container">
        <div class="answer-input">
          <el-input
            :disabled="question.isChecked || disabled"
            v-model="question.studentAnswer"
            @focus="changeAnswer"
            @paste.native.capture.prevent="$handlePaste"
          ></el-input>
          <img
            class="checked-answer"
            v-if="
              question.isChecked &&
              question.studentAnswer &&
              question.is_true == 1
            "
            src="@/assets/img/icon/true.png"
            alt=""
          />
          <img
            v-if="
              question.isChecked &&
              question.studentAnswer &&
              question.is_true == 0
            "
            class="checked-answer"
            src="@/assets/img/icon/false.png"
            alt=""
          />
          <span
            class="no-check checked-answer"
            v-if="question.isChecked && !question.studentAnswer"
          >
            （未填）
          </span>
        </div>
        <div
          class="true-answer"
          :class="question.question_type == 4 ? 'click' : ''"
          @click="playAudio"
        >
          <span>{{ question.trueAnswer }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { debounce } from "@/utils/utils";
import AudioPlay from "@/components/AudioPlay";
export default {
  data() {
    return {
      typeObj: {
        1: "英译汉",
        2: "汉译英",
        3: "听力理解",
        4: "听写",
        5: "默写",
      },
      studentAnswer: "",
    };
  },
  components: {
    AudioPlay,
  },
  methods: {
    playAudio() {
      if (this.$refs.audioPlay) {
        this.$refs.audioPlay.playAudio();
      }
    },
    //  Object.prototype.toString.call(this.studentAnswer) == "[object String]"
    // ? this.studentAnswer.trim()
    // : this.studentAnswer,

    changeStudentAnswer: debounce(function () {
      let data = this.studentAnswer;
      if (
        this.question.question_type == 4 ||
        this.question.question_type == 5
      ) {
        data = this.studentAnswer.trim();
      }
      this.$emit("changeStudentAnswer", data, this.question.allIndex);
    }, 100),
    changeAnswer() {
      if (this.question.question_type == 4) {
        this.playAudio();
      }
      if (
        this.question.question_type == 1 ||
        this.question.question_type == 2 ||
        this.question.question_type == 3
      ) {
        this.changeStudentAnswer();
      }
      this.$emit("changeAnswer", this.question.allIndex);
    },
    inputFocus() {
      if (this.$refs.input) {
        this.$refs.input.focus();
      }
    },
    inputBlur() {
      if (this.$refs.input) {
        this.$refs.input.blur();
      }
    },
  },
  props: {
    question: {
      type: Object,
      default: function () {
        return {};
      },
    },

    index: {
      type: Number,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isQuick: {
      type: Boolean,
      default: false,
    },
    isMemory: {
      type: Boolean,
      default: false,
    },
    isPrint: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    question: {
      handler(newData) {
        if (this.studentAnswer != newData.studentAnswer) {
          this.studentAnswer = newData.studentAnswer;
        }
      },
      immediate: true,
    },
  },
};
</script>